import React, { Component } from 'react';
import pic from '../assecs/1.png'
import '../styles/MyCate.scss'

class MyCate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      indexs: 0,
      list: [
        {
          name: '活动专区',
          list2: [
            {
              name2: '11.11',
              list3: [
                { pic, name3: '数码' },
                { pic, name3: '面膜' },
                { pic, name3: '香水' },
                { pic, name3: '食品' },
              ]
            },
            {
              name2: '12.12',
              list3: [
                { pic, name3: '衣服' },
                { pic, name3: '玩具' },
                { pic, name3: '鞋子' },
                { pic, name3: '化妆' },
              ]
            }
          ]
        },
        {
          name: '品牌',
          list2: [
            {
              name2: '欧莱雅',
              list3: [
                { pic, name3: '面膜' },
                { pic, name3: '洗发水' },
                { pic, name3: '香水' },
                { pic, name3: '沐浴露' },
              ]
            },
            {
              name2: '迪奥',
              list3: [
                { pic, name3: '口红' },
                { pic, name3: '香水' },
                { pic, name3: '皮具' },
                { pic, name3: '衣服' },
              ]
            }
          ]
        },
        {
          name: '美容护肤',
          list2: [
            {
              name2: '面部护理',
              list3: [
                { pic, name3: '卸妆' },
                { pic, name3: '洁面' },
                { pic, name3: '喷雾' },
                { pic, name3: '乳液' },
              ]
            },
            {
              name2: '头部护理',
              list3: [
                { pic, name3: '洗发水' },
                { pic, name3: '护发素' },
                { pic, name3: '发膜' },
                { pic, name3: '换头' },
              ]
            }
          ]

        },
        {
          name: '香水',
          list2: [
            {
              name2: '男士香水',
              list3: [
                { pic, name3: '大宝' },
                { pic, name3: '六神' },
                { pic, name3: '万宝龙' },
                { pic, name3: '香奈儿' },
              ]
            },
            {
              name2: '头部护理',
              list3: [
                { pic, name3: '迪奥' },
                { pic, name3: '香奈儿' },
                { pic, name3: '阿玛尼' },
                { pic, name3: '圣罗兰' },
              ]
            }
          ]

        }

      ]
    }
  }
  handclick(index) {
    this.setState({ indexs: index })
  }
  render() {
    return (
      <div className='cate'>
        <div className="left">
          {
            this.state.list.map((item, index) => {
              return (
                <div className={'name ' + (this.state.indexs === index ? 'active' : '')} key={index} onClick={() => { this.handclick(index) }}>{item.name}</div>
              )
            })
          }
        </div>
        <div className="right">
          {
            this.state.list[this.state.indexs].list2.map((item, index) => {
              return (
                <div className="name2" key={index}>
                  <div className='title'> {item.name2}</div>
                  <div className="list">
                    {
                      item.list3.map((item, index) => {
                        return (
                          <div className="item" key={index}>
                            <img src={item.pic} alt="" />
                            <p>{item.name3}</p>
                          </div>

                        )
                      })
                    }
                  </div>

                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default MyCate;